<script lang="ts" setup>
import { computed } from "vue";
import { FuncFormPage, FuncGroupPanel, CodeListMap } from "../interface/func-view-form";
import { getGridCol } from "../utils/getGridCol";

const props = defineProps<{
  data: FuncGroupPanel
  pData: FuncFormPage | FuncGroupPanel
  level: number
  codeListMap: CodeListMap
  ctrlName: string
}>()

const width = computed(() => {
  return getGridCol(props.data.getPSLayoutPos, props.pData.getPSLayout)
})

const panelId = computed(() => {
  return `_${props.level}-${props.ctrlName}-${props.data.codeName}`
})
</script>

<template>
  <div class="form-group-panel">
    <template v-if="props.data.showCaption">
      <h2 v-if="props.level === 2" class="group-panel-caption" :id="panelId" tabindex="-1">
        {{ props.data.caption }}
        <a class="header-anchor" :href="`#${panelId}`">¶</a>
      </h2>
      <h5 v-else class="group-panel-caption" :id="panelId" tabindex="-1">
        {{ props.data.caption }}
        <a class="header-anchor" :href="`#${panelId}`">¶</a>
      </h5>
    </template>
    <template v-for="(item, i) in props.data.getPSDEFormDetails" :key="i">
      <template v-if="item.detailType === 'GROUPPANEL'">
        <FormGroupPanel :data="item" :pData="props.data" :codeListMap="props.codeListMap" :level="props.level + 1"
          :ctrlName="props.ctrlName" />
      </template>
      <template v-else-if="item.detailType === 'FORMITEM'">
        <FormItem :data="item" :pData="props.data" :codeListMap="props.codeListMap" />
      </template>
    </template>
  </div>
</template>

<style scoped>
.form-group-panel {
  display: flex;
  flex-wrap: wrap;
  width: v-bind('width');
}

.group-panel-caption {
  flex: 0 0 100%;
  margin: 0;
  border: none;
  border-bottom: 1px solid #3c3c3c1f;
  padding-top: 12px;
}
</style>